<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <h1 class="title">{{ title }}学科数据列表</h1>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        bordered>
        <div slot="state" slot-scope="text, record" class="record">
          <span>{{ state[record.state] }}</span>
        </div>
        <div slot="action" slot-scope="text, record" class="action">
          <a-button type="primary" size="small" @click="handleDownload(record.id)">样表下载</a-button>
          <a-upload
            name="file"
            :action="uploadUrl(record.id)"
            :data="{ subject: title }"
          >
            <a-button type="primary" size="small">上传</a-button>
          </a-upload>
          <a-button size="small" @click="handleCheck(record.id)">查看</a-button>
        </div>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getSubjectTable, tableDownload, viewTable, kkView, tableUpload } from '@/api/table'
export default {
  name: 'BaseForm',
  data () {
    return {
      loading: true,
      state: ['未上传', '已上传', '已退回'],
      columns: [{
        title: '检测项目',
        key: 'project',
        width: '100px',
        dataIndex: 'project'
      },
      {
        title: '检测要素',
        key: 'factor',
        width: '100px',
        dataIndex: 'factor'
      },
      {
        title: '核心监测点',
        key: 'point',
        dataIndex: 'point',
        width: '100px'
      },
      {
        title: '监测点说明',
        key: 'content',
        dataIndex: 'content'
      },
      {
        title: '说明',
        key: 'explain',
        dataIndex: 'explain',
        width: '120px'
      },
      {
        title: '填报内容',
        key: 'action',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: '230px'
      }],
      tableData: []
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    title () {
      return this.$route.query.title || ''
    }
  },
  methods: {
    getData () {
      return new Promise((resolve, reject) => {
        getSubjectTable({
          code: this.$route.query.id
        }).then(response => {
          this.tableData = response.data
          this.loading = false
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    uploadUrl (id) {
      return tableUpload + id
    },
    handleDownload (id) {
      const downlodaurl = tableDownload + id
      window.open(downlodaurl)
    },
    handleHistory (recordlist) {
      this.recordlist = recordlist
      this.visible = true
    },
    handleDetail () {
      this.$router.push({ path: '/' })
    },
    handleCheck (id) {
      return new Promise((resolve, reject) => {
        viewTable(id, { subject: this.title }).then(response => {
          window.open(kkView + encodeURIComponent(response.url))
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .action button {
    margin: 4px 6px 0 0;
  }
  .record {
    text-align: center;
  }
  .record span {
    display: block;
  }
</style>
